<template>
    <div class="info-collect">
        <Crumb name="Import"></Crumb>
        <div class="content">
            <el-button type="primary" size="small" @click="openAdd">Add Import</el-button>
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By BL"
                        prefix-icon="el-icon-search"
                > </el-input>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="importList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="dispatchDateStr"
                            label="Export Date"

                    >
                    </el-table-column>
                    <el-table-column
                            prop="arrivePort"
                            label="Port"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="ship"
                            label="Ship"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="boxTotal"
                            label="Total Number"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="ladingNumber"
                            label="BL"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="arriveDateStr"
                            label="Arrive Date"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="statusDesc"
                            label="Status"
                    >
                    </el-table-column>

                </el-table>
                <div class="page">
                    <el-pagination background
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>

            </div>
        </div>
        <el-dialog
                title="Import"
                :visible.sync="dialogVisible"
                width="80%"
               >
            <el-form ref="form" style="text-align: left" :model="importData" label-width="100px" inline :rules="rule">
                <el-form-item label="Export Date" prop="dispatchDateStr">
                    <el-date-picker v-model="importData.dispatchDateStr" type="date" placeholder="Export Date" value-format="yyyy-MM-dd" size="small"></el-date-picker>
                </el-form-item>
                <el-form-item label="Port">
                    <el-input v-model="importData.arrivePort" placeholder="Port" size="small"></el-input>
                </el-form-item>
                <el-form-item label="Ship">
                    <el-input v-model="importData.ship" placeholder="Ship" size="small"></el-input>
                </el-form-item>
                <el-form-item label="BL" porp="ladingNumber">
                    <el-input v-model="importData.ladingNumber" placeholder="BL" size="small"></el-input>
                </el-form-item>
                <el-form-item label="Arrive Date" prop="arriveDateStr">
                    <el-date-picker v-model="importData.arriveDateStr" type="date" placeholder="Arrive Date" value-format="yyyy-MM-dd" size="small"></el-date-picker>
                </el-form-item>
                <el-form-item label="Total Number" >
                    <el-input v-model="importData.boxTotal" placeholder="Box Total" size="small"></el-input>
                </el-form-item>
                <el-form-item label="Status">
                    <el-select v-model="importData.status" placeholder="Status" size="small">
                        <el-option
                                v-for="item in [{key:0,label:'Export'},{key:1,label:'Import'},{key:2,label:'Arrive'}]"
                                :key="item.key"
                                :label="item.label"
                                :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import {getImportList,addImport} from "../../api/contract";
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'

    export default {
        name: "import",
        mixins:[mixins],
        data() {
            return {
                list: [],
                rule:{
                    ladingNumber:[{required:true}],
                    dispatchDateStr:[{required:true}],
                    arriveDateStr:[{required:true}]
                },
                importData:{
                    dispatchDateStr:'',
                    arrivePort:'',
                    arriveDateStr:'',
                    ship:'',
                    ladingNumber:'',
                    boxTotal:'',
                    status:'',
                    packingList:'123',
                    invoice:'123',

                },
                key: '',
                dialogVisible:false
            }
        },
        computed:{
            importList(){
                return this.list.filter(item=>item.ladingNumber.includes(this.key))
            }
        },
        created(){
            this.getImportList()
        },
        methods: {
            submitForm(){
                this.$refs.form.validate(async valid => {
                    if(valid) {
                        const {status} = await addImport(this.importData);
                        if (status === ERROR_OK) {
                            this.getImportList();
                            this.$notify.success('Add successfully');
                            this.dialogVisible = false;
                            this.clear()
                        }
                    }
                })
            },
            clear(){
                this.importData = {
                    dispatchDateStr:'',
                    arrivePort:'',
                    arriveDateStr:'',
                    ship:'',
                    ladingNumber:'',
                    boxTotal:'',
                    status:'',
                    packingList:'123',
                    invoice:'123'
                }
            },
            async getImportList() {
                const {status,data} = await getImportList();
                if (status === ERROR_OK) {
                    this.list = data
                    this.total = data.length
                }
            },
            openAdd(){
                this.dialogVisible = true
            }


        },
        components: {
            Crumb, Search
        },
        watch:{
            importList(list){
                this.total = list.length
            }
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
    }
</style>